/**
 * @description  因子风险
 */
import React, { PureComponent } from 'react';
import { connect } from 'dva';
import { XYAxisChartsC } from '../../../../comps';
import style from '../index.less';

class FactorRiskTrend extends PureComponent {
  constructor() {
    super();
    this.state = {
      factorRiskTrendData: {},
    };
  }
  componentDidMount() {
    const { dispatch, args } = this.props;
    this.getFactorRiskTrend(args);
  }
  UNSAFE_componentWillReceiveProps(nextProps) {
    const { dispatch, args, timeStamp } = nextProps;
    if (JSON.stringify(timeStamp) !== JSON.stringify(this.props.timeStamp)) {
      this.setState({
        factorRiskTrendData: {},
      });
      this.getFactorRiskTrend(args);
    }
  }
  getFactorRiskTrend = (args) => {
    const { dispatch } = this.props;
    dispatch({
      type: 'riskAttributionM/getFactorRiskTrend',
      payload: args,
      callback: (data) => {
        if (data && data.series && data.series.length) {
          let series = data.series?.map((item) => {
            let datax = item.data.map((x) => {
              x = parseFloat(x * 100);
              return x;
            });
            item.data = datax;
            return item;
          });
          data.series = series;
        }
        this.setState({
          factorRiskTrendData: data || {},
        });
      },
    });
  };

  showCharts = () => {
    const { factorRiskTrendData } = this.state;
    const xAxis = factorRiskTrendData.xAxis;
    const series = factorRiskTrendData.series;
    return (
      <div style={{ height: '455px' }}>
        <XYAxisChartsC xAxis={xAxis} series={series} height='445px' yAxisUnit={['单位(%)']} dataZoom={true} width='100%' tooltipValueFix={4} thousandthStyle />
      </div>
    );
  };

  render() {
    return (
      <div className={style.back_charts}>
        <div style={{ height: '455px' }} className='echarts'>
          {this.showCharts()}
        </div>
      </div>
    );
  }
}
export default connect(({ riskAttributionM }) => ({
  riskAttributionM,
}))(FactorRiskTrend);
